<template>
	<el-row :gutter="20" class="container">
		<el-col :span="8">
			<el-card v-if="formType == 'add'" class="form-card" style="border: 1px solid #2a3547;">
				<h3>{{formTypeText == '新增' ? '逃跑犯新增' :'罪犯编辑'}}</h3>
				<br>
				<hr style="width: 449px;position: absolute;left: 12px;border: 0.1px grey solid;">
				<br>
				<el-form :model="formData"  :rules="rules" ref="formRef" label-width="80px">
					<el-form-item label="罪犯姓名" prop="name" >
						<el-input v-model="formData.name" placeholder="请输入姓名" />
					</el-form-item>
					<el-form-item label="罪犯编号" prop="provinceCode">
						<el-input v-model="formData.provinceCode" placeholder="请输入编号(省)" />
					</el-form-item>
					<el-form-item label="身份证号">
						<el-input v-model="formData.account" placeholder="请输入身份证号" />
					</el-form-item>
					<el-form-item label="部门">
						<el-select style="width: 340px" v-model="formChange.orgId" placeholder="请选择" filterable
							@change="handleSelectChange">
							<el-option v-for="item in jqArr" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="罪犯照片">
						<el-upload class="avatar-uploader" :show-file-list="false" :on-change="beforeUpload"
							auto-upload="false">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
				</el-form>
				<div style="margin-left: 340px;margin-top: 140px;">
					<el-button type="primary" @click="SaveFun">{{formTypeText}}</el-button>
				</div>
			</el-card>
		</el-col>

		<el-col :span="16">
			<div class="search-bar">
				<el-button title="添加" class="filter-item" type="success" :icon="Plus" @click="add()">
				</el-button>
				<el-input style="width: 200px;margin-left: 580px;" v-model="searchName" placeholder="请输入查询姓名"
					class="filter-item" />
				<el-button type="primary" :icon="Search" @click="getUserSelect">查询</el-button>
			</div>
			<el-table :data="CriminalInfoSelectList" border fit highlight-current-row stripe style="background-color: rgb(8, 32, 78);color: white;">
				<el-table-column type="index" align="center" width="60" label="序号" />
				<el-table-column label="部门" align="center" width="120">
					<template #default="scope">{{ scope.row.orgName }}</template>
				</el-table-column>
				<el-table-column label="姓名" align="center" width="120">
					<template #default="scope">{{ scope.row.name }}</template>
				</el-table-column>
				<el-table-column label="编号(省)" align="center" width="120">
					<template #default="scope">{{ scope.row.provinceCode }}</template>
				</el-table-column>
				<el-table-column label="身份证号" align="center" width="120">
					<template #default="scope">{{ scope.row.account }}</template>
				</el-table-column>
				<el-table-column label="照片" align="center" width="120">
					<template #default="scope">
						<img v-if="scope.row.photo" :src="scope.row.photo" class="table-avatar" />
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="120">
					<template #default="scope">{{ scope.row.stateName }}</template>
				</el-table-column>
				<el-table-column label="来源" align="center" width="60">
					<template #default="scope">{{ asyncState(scope.row.async) }}</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-popconfirm title="确认删除吗?" @confirm.stop="handleDelete(scope.row)">
							<template #reference>
								<el-button size="small" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
	<Pagination style="position: absolute;bottom: 10px;right: 10px;" :total="total" :page="page" :limit="limit"
		@pagination="handlePagination" />
</template>


<script setup>
	import http from "@/utils/api";
	import Pagination from "@/components/Pagination/index.vue";
	import {
		Search,
		Upload,
		Plus,
	} from "@element-plus/icons-vue";
	import {
		ElMessage,
	} from "element-plus";
	import {
		ref,
		onBeforeMount,
	} from "vue";
	import {
		defineProps,
	} from "vue";

	const formRef = ref(null);
	const imageUrl = ref("");
	let CriminalInfoSelectList = ref([]);

	const formData = ref({});
	const formType = ref('add');
	const formTypeText = ref('新增')
	const formChange = ref({})

	const changeName = ref("")
	const changeUserNo = ref("")
	const UserId = ref(0)

	const total = ref(0);
	const page = ref(1);
	const limit = ref(15);

	let jqArr = ref([]);
	let userInfo = ref({});

	const rules = {
		name: [{
			required: true,
			message: "请输入姓名",
			trigger: "blur"
		}],
		provinceCode: [{
			required: true,
			message: "请输入罪犯编号",
			trigger: "blur"
		}]
	};


	onBeforeMount(() => {
		userInfo = JSON.parse(sessionStorage.getItem("userInfo"));

		getFormattedDateTime();
		getUserSelect();
		getOrgSelect();
	});

	let dateSfm = ref("");
	let hour = ref("");
	let daydata = ref("");

	let searchName = ref('')

	//查询
	const getUserSelect = async () => {
		let res = await http.zfpt.CriminalSelect({
			page: page.value,
			limit: limit.value,
			criminalNo: "",
			name: searchName.value,
			state: "tpfr",
			jsh: "",
			async: "",
			orgId: '',
			location: "",
			joinDate: daydata.value,
		});
		if (res && res.code == 0) {
			if (res.data.data.length) {
				CriminalInfoSelectList.value = res.data.data;
				total.value = res?.data?.total || 0;
			} else {
				CriminalInfoSelectList.value = [];
			}
		}
	};

	const getOrgSelect = async () => {
		let res = await http.base.OrgSelect({
			type: "",
			orgId: userInfo.unitId,
			isLock: "0",
			level: "tree",
			contain: "",
		});
		if (res && res.code == 0) {
			if (res.data) {
				jqArr.value = res.data;
			} else {
				jqArr.value = [];
			}
		}
	};

	//删除数据
	const handleDelete = async (row) => {
		let res = await http.zfpt.CriminalDel({
			id: row.id
		});
		if (res && res.code == 0) {
			ElMessage({
				message: "删除成功",
				type: "success",
				plain: true,
			});
			getUserSelect();
		}
	};

	// 获取年月日 时
	const getFormattedDateTime = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, "0");
		const day = String(now.getDate()).padStart(2, "0");
		const hours = String(now.getHours()).padStart(2, "0");
		const minutes = String(now.getMinutes()).padStart(2, "0");
		const seconds = String(now.getSeconds()).padStart(2, "0");
		dateSfm.value = `${hours}:${minutes}:${seconds}`;
		hour.value = String(now.getHours()).padStart(2, "0");
		daydata.value = `${year}-${month}-${day}`;

		return `${year}-${month}-${day} ${hour.value}`;
	};
	// 新增
	const add = async () => {
		formType.value = 'add';
		formTypeText.value = '新增';
		let obj = {};
		formData.value = Object.assign({}, obj);
	}

	//编辑保存
	const SaveFun = async () => {
		formRef.value.validate(async (valid) => {
			if (!valid) return;
			formData.value.state = 'tpfr';
			let res = await http.zfpt.CriminalAdd(formData.value);
			if (res && res.code == 0) {
				ElMessage.success("保存成功");
				formData.value = {};
				imageUrl.value = null;
				getUserSelect();
			}
		})
	};

	const handleSelectChange = (value) => {
		formData.value.orgId = value;

	};

	// 处理分页
	const handlePagination = ({
		page: newPage,
		limit: newLimit
	}) => {
		page.value = newPage;
		limit.value = newLimit;
		getUserSelect();
	};

	// 数据来源
	const asyncState = (state) => {
		const stateMap = {
			"1": "同步",
			"2": "本地"
		};
		return stateMap[state] || "未知";
	};

	const beforeUpload = (file) => {
		// 定义一个接受的图片类型数组
		const acceptedImageTypes = ["image/png", "image/jpeg", "image/gif"];

		// 判断文件类型是否为图片
		const isImage = acceptedImageTypes.includes(file.raw.type);
		if (!isImage) {
			ElMessage.error("上传文件只能是图片格式!");
			return;
		}

		// 判断文件大小是否小于3MB
		const isLt3M = file.size / 1024 / 1024 < 3;
		if (!isLt3M) {
			ElMessage.error("上传文件大小不能超过 3MB!");
			return;
		}
		imageUrl.value = URL.createObjectURL(file.raw);
		upload(file.raw);
	};

	const upload = async (fileUrl) => {
		let fileObj = {
			type: "photo",
			file: fileUrl,
		};
		let res = await http.saveResourceNew(fileObj);
		if (res && res.code == 0) {
			formData.value.photo = res.data;
		}
	};
</script>


<style scoped lang="scss">
	.container {
		padding-top: 5px;
	}

	.form-card {
		color: white;
		height: 700px;
		padding: 15px;
		background-color: #34517d3b;
	}


	.table-avatar {
		width: 40px;
		height: 40px;
	}

	.search-bar {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}

	.imgs_avta {
		width: 100px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 60px;
			height: 60px;
		}
	}

	.avatar-uploader .avatar {
		width: 150px;
		height: 150px;
		display: block;
		border: 1px solid #cccccc24;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		text-align: center;
		border: 1px solid #ccc;
	}

	::v-deep .el-select__wrapper {
		background: rgb(83 142 232 / 29%);
		color: white;
		box-shadow: none;
	}

	.form_item {
		width: 100%;
		height: 40px;
		margin-bottom: 10px;
		color: white;
	}

	.titles {
		min-width: 80px;
		height: 100%;
	}

	.nub_box {
		padding-left: 20px;
		color: white;
		font-size: 14px;
	}

	::v-deep .example-pagination-block {
		margin-top: 10px;
		margin-left: 230px;

		.el-pagination.is-background .btn-prev {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination.is-background .el-pager li {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination.is-background .btn-next {
			background-color: #34517d3b;
			color: #ffffff;
		}

		.el-pagination__total {
			color: #ffffff;
		}

		.el-pager li.is-active {
			background-color: #0768f9d3 !important;
		}
	}

	::v-deep .serch_box {
		.el-input__wrapper {
			background-color: #ffffffc7;
			box-shadow: (0 0 0 1px #dcdfe600) inset;
		}

	}

	::v-deep .el-table {
		thead tr .el-table__cell {
			border-bottom: none !important;
		}

		.el-table__cell {
			padding: 2px 0 !important;
			background: rgb(8, 38, 78) !important;
		}

		.el-table th.el-table__cell.is-leaf {
			background: rgb(8, 38, 78) !important;
		}

		.el-table .cell {
			font-size: 12px !important;
		}

		.el-table .el-table__cell {
			padding: 2px 4px;
		}

		.el-table td.el-table__cell div {
			box-sizing: border-box;
			color: #ffffff !important;
			height: auto;
			line-height: 38px;
		}

		--el-table-border-color: rgb(23, 88, 158);
		--el-table-border: 1px solid rgb(23, 88, 158);

		.cell {
			height: auto;
			text-align: center;
			// border: 1px solid #ccc;
			color: white;
			font-size: 12px;
			line-height: 35px;
		}

		--el-table-bg-color: #fcfcfc00;

		.el-scrollbar {
			border: 1px solid rgb(23, 88, 158);
			border-right: none;
			border-left: none;
		}
	}

	.drawer_box {
		width: 100%;
		height: 710px;
		position: relative;
		box-sizing: border-box;
		padding: 0px 10px;

		.drawer_text {
			position: absolute;
			top: -28px;
			left: 2px;
			font-size: 18px;
		}
	}
</style>